﻿var shadowDialog = {
    shade: function(target, speed) {
        var $target = $(target);

        pdLeft = parseInt($target.css('paddingLeft'), 10);
        pdRight = parseInt($target.css('paddingRight'), 10);
        pdTop = parseInt($target.css('paddingTop'), 10);
        pdBottom = parseInt($target.css('paddingBottom'), 10);

        bdLeft = parseInt($target.css('borderLeftWidth'), 10);
        bdRight = parseInt($target.css('borderRightWidth'), 10);
        bdTop = parseInt($target.css('borderTopWidth'), 10);
        bdBottom = parseInt($target.css('borderBottomWidth'), 10);


        var left = parseInt($target.css('left'), 10);
        var top = parseInt($target.css('top'), 10);
        var width = $target.width() + pdLeft + bdLeft + pdRight + bdRight;
        var height = $target.height() + pdTop + bdTop + pdBottom + bdBottom;

        var p1 = { x: left, y: top };
        var p2 = { x: p1.x + width, y: top };
        var p3 = { x: left, y: p1.y + height };
        var p4 = { x: p2.x, y: p3.y };

        var screenWidth = $(document).width();
        var screenHeight = $(document).height();

        //            $('#l_t').animate({ width: p2.x, height: p1.y }, speed);
        //            $('#r_t').animate({ left: p2.x, width: screenWidth - p2.x, height: p4.y }, speed);
        //            $('#l_b').animate({ top: p1.y, width: p1.x, height: screenHeight - p1.y }, speed);
        //            $('#r_b').animate({ left: p3.x, top: p3.y, width: screenWidth - p3.x, height: screenHeight - p3.y }, speed);
        $('#l_t').animate({ width: p3.x, height: p3.y }, speed);
        $('#r_t').animate({ left: p1.x, width: screenWidth - p1.x, height: p1.y }, speed);
        $('#l_b').animate({ top: p4.y, width: p4.x, height: screenHeight - p4.y }, speed);
        $('#r_b').animate({ left: p2.x, top: p2.y, width: screenWidth - p2.x, height: screenHeight - p2.y }, speed);
    },
    fade: function(target, speed) {
        var $target = $(target);

        pdLeft = parseInt($target.css('paddingLeft'), 10);
        pdRight = parseInt($target.css('paddingRight'), 10);
        pdTop = parseInt($target.css('paddingTop'), 10);
        pdBottom = parseInt($target.css('paddingBottom'), 10);

        bdLeft = parseInt($target.css('borderLeftWidth'), 10);
        bdRight = parseInt($target.css('borderRightWidth'), 10);
        bdTop = parseInt($target.css('borderTopWidth'), 10);
        bdBottom = parseInt($target.css('borderBottomWidth'), 10);


        var left = parseInt($target.css('left'), 10);
        var top = parseInt($target.css('top'), 10);
        var width = $target.width() + pdLeft + bdLeft + pdRight + bdRight;
        var height = $target.height() + pdTop + bdTop + pdBottom + bdBottom;

        var p1 = { x: left, y: top };
        var p2 = { x: p1.x + width, y: top };
        var p3 = { x: left, y: p1.y + height };
        var p4 = { x: p2.left, y: p3.y };

        var screenWidth = $(document).width();
        var screenHeight = $(document).height();

        $('#l_t').animate({ width: 0, height: 0 }, speed);
        $('#r_t').animate({ height: 0, width: 0, left: screenWidth }, speed);
        $('#l_b').animate({ width: 0, height: 0, top: screenHeight }, speed);
        $('#r_b').animate({ width: 0, height: 0, top: screenHeight, left: screenWidth }, speed);
    }
};

$(document).ready(function() {
    $('#hide').click(function() {
        shadowDialog.shade('#win', 'normal');
    });

    $('#win').click(function() {
        shadowDialog.shade('#win2', 'normal');
    });

    $('.grate').click(function() {
        shadowDialog.fade('#win', 'normal');
    });

});